<template>
    <div class="view">
        <div ref="header" class="nav-back" :style="`background:rgba(255,255,255,${headAlpha});color:${headAlpha>.9?'#ec6786':'#fff'}`">
            <span class="iconfont icon-fanhui" @click="back"></span>
            <span class="nickname" :style="`color:${headAlpha>.9?'#ec6786':'transparent'}`">{{user.nickname}}</span>
            <span class="iconfont icon-share rt" @click="toPage('mineShare')"></span>
        </div>
        <cube-scroll class="scroll" :data="String(user).split(',')" ref="scroll" :scroll-events="['scroll']" @scroll="scrollHandler" :options="{bounce:false}">
            <div class="nav-box">
                <svg width="100vw" height="130" version="1.1" xmlns="http://www.w3.org/2000/svg">
                    <path :d="`M0 100 c${screenWidth/3} -${60 * screenWidth/320}, ${screenWidth/3*2} -${60 * screenWidth/320}, ${screenWidth} 0 V 130 H 0 Z`" stroke="#fff" fill="#fff"></path>
                </svg>
                <div class="arc-box" :style="`height: 80px;bottom: 0px;`">
                    <div class="head-img-box" @click="toAlbum">
                        <head-img class="self-img" :styleObject="{width:'22vw',height:'22vw'}" showObject="self" :self="self" noneImgTip="上传头像"></head-img>
                        <p class="state-tip" v-if="user.avatar && user.avatar.fileStatus.status==0">审核中</p>
                    </div>
                    <div class="who-like-me flex" style="bottom:20px;" @click="toPage('whoLikeMe')">
                        <div class="icon-box"><span class="iconfont icon-ren"></span></div>
                        <div class="tip">
                            谁喜欢我
                        </div>
                    </div>
                    <div class="data-complete flex" style="bottom:20px;">
                        <div class="out-round">
                            <round-progress-bar class="icon-box" circleBarWidth="10vw"
                                                circleBarHeight="10vw"
                                                circleLClip="rect(0,5vw,auto,0)"
                                                circleRClip="rect(0,auto,auto,5vw)"
                                                circleBarBC="#ec6786"
                                                circleBarLRBC="#F8C9D4"
                                                maskWidth="8vw"
                                                maskHeight="8vw"
                                                maskLineHeight="8vw"
                                                :progress="user.infodegree"
                                                progressColor="#ec6786">
                            </round-progress-bar>
                        </div>
                        <div class="tip">
                            资料完整度
                        </div>
                    </div>
                </div>
            </div>
            <div class="base-data">
                <div class="nickname">{{user.nickname}}</div>
                <div class="base-items">
                    <span class="age" v-if="user.age!=='' || user.age!=='未填写'">{{user.age}}岁</span>&nbsp;
                    <span class="height" v-if="user.height!==0 || user.snapHeight!=='未填写'">{{user.snapHeight}}</span>&nbsp;
                    <span class="home" v-if="user.snapCityId!=='未填写'">{{user.snapCityId}}</span>
                </div>
            </div>
            <div class="other-data">
                <div class="self-intro">
                    <div class="title-box flex">
                        <span class="iconfont icon-touxiang"></span>
                        <span class="title">自我介绍</span>
                        <span class="edit rt" @click="editIntroduce">+编辑</span>
                    </div>
                    <div class="content-box">
                        {{!user.introduction?'您还未添加自我介绍,赶快去编辑吧!让对方更好的了解你。':user.introduction}}
                    </div>
                </div>
                <div class="spouse-factor">
                    <div class="title-box flex">
                        <span class="iconfont icon-xinshuai"></span>
                        <span class="title">择偶意向</span>
                        <span class="edit" @click="toPage('mineDataEdit',{type:'spouseFactor'})">+编辑</span>
                    </div>
                    <div class="content-box">
                        <div class="age flex"><span>年龄</span><span class="ellipsis">{{user.mateSelection.snapAge}}</span></div>
                        <div class="height flex"><span>身高</span><span class="ellipsis">{{user.mateSelection.snapHeight}}</span></div>
                        <div class="education flex"><span>学历</span><span class="ellipsis">{{user.mateSelection.snapEducation}}</span></div>
                        <div class="income flex"><span>月收入</span><span class="ellipsis">{{user.mateSelection.snapIncome}}</span></div>
                        <div class="home flex"><span>居住地</span><span class="ellipsis">{{user.mateSelection.snapCityId}}</span></div>
                        <div class="arital-status flex"><span>婚姻状况</span><span class="ellipsis">{{user.mateSelection.snapMaritalStatus}}</span></div>
                        <div class="house flex"><span>购房情况</span><span class="ellipsis">{{user.mateSelection.snapHousePurchase}}</span></div>
                        <div class="children flex"><span>子女情况</span><span class="ellipsis">{{user.mateSelection.snapChild}}</span></div>
                    </div>
                </div>
                <div class="hobby">
                    <div class="title-box flex">
                        <span class="iconfont icon-xiangji"></span>
                        <span class="title">兴趣爱好</span>
                        <span class="edit rt" @click="toPage('mineHobby')">+编辑</span>
                    </div>
                    <div class="content-box">
                        <div class="none-content" v-if="user.hobby==''">添加兴趣爱好标签，找到相同爱好的Ta</div>
                        <div class="has-content" v-if="user.hobby!==''">
                            <span v-for="item in hobbyItems">{{item}}</span>
                        </div>
                    </div>
                </div>
                <div class="self-base-data">
                    <div class="title-box flex">
                        <span class="iconfont icon-shenfenzheng"></span>
                        <span class="title">基本资料</span>
                        <span class="edit" @click="toPage('mineDataEdit',{type:'baseData'})">+编辑</span>
                    </div>
                    <div class="content-box">
                        <div class="id flex"><span>ID</span><span class="ellipsis">{{user.userNo}}</span></div>
                        <div class="nickname flex"><span>昵称</span><span class="ellipsis">{{user.nickname}}</span></div>
                        <div class="sex flex"><span>性别</span><span class="ellipsis">{{user.gender==2?'女':'男'}}</span></div>
                        <div class="age flex"><span>年龄</span><span class="ellipsis">{{user.age}}岁</span></div>
                        <div class="height flex"><span>身高</span><span class="ellipsis">{{user.snapHeight}}</span></div>
                        <div class="education flex"><span>学历</span><span class="ellipsis">{{user.snapEducation}}</span></div>
                        <div class="income flex"><span>月收入</span><span class="ellipsis">{{user.snapIncome}}</span></div>
                        <div class="home flex"><span>居住地</span><span class="ellipsis">{{user.snapCityId}}</span></div>
                        <div class="arital-status flex"><span>婚姻状况</span><span class="ellipsis">{{user.snapMaritalStatus}}</span></div>
                        <div class="children flex"><span>子女情况</span><span class="ellipsis">{{user.snapChild}}</span></div>
                        <div class="house flex"><span>购房情况</span><span class="ellipsis">{{user.snapHousePurchase}}</span></div>
                        <div class="car flex"><span>购车情况</span><span class="ellipsis">{{user.snapCarPurchase}}</span></div>
                    </div>
                </div>
                <div class="self-archives">
                    <div class="title-box flex">
                        <span class="iconfont icon-zheyeditu_A"></span>
                        <span class="title">小档案</span>
                        <span class="edit" @click="toPage('mineDataEdit',{type:'selfArchives'})">+编辑</span>
                    </div>
                    <div class="content-box">
                        <div class="home flex"><span>家乡</span><span class="ellipsis">{{user.snapHometownCityId}}</span></div>
                        <div class="residence flex"><span>户口</span><span class="ellipsis">{{user.snapRegisteredResidenceCityId}}</span></div>
                        <div class="race flex"><span>民族</span><span class="ellipsis">{{user.snapNation}}</span></div>
                        <div class="zodiac flex"><span>属相</span><span class="ellipsis">{{user.snapZodiac}}</span></div>
                        <div class="constellation flex"><span>星座</span><span class="ellipsis">{{user.snapConstellation}}</span></div>
                        <div class="blood-type flex"><span>血型</span><span class="ellipsis">{{user.snapBloodtype}}</span></div>
                        <div class="shape flex"><span>体型</span><span class="ellipsis">{{user.snapShare}}</span></div>
                        <div class="weight flex"><span>体重</span><span class="ellipsis">{{user.snapWeight}}</span></div>
                        <div class="facial-evaluate flex"><span>相貌自评</span><span class="ellipsis">{{user.snapEvaluation}}</span></div>
                        <div class="religious-belief flex"><span>宗教信仰</span><span class="ellipsis">{{user.snapBelief}}</span></div>
                        <div class="smoke flex"><span>是否吸烟</span><span class="ellipsis">{{user.snapSmoke}}</span></div>
                        <div class="drink flex"><span>是否喝酒</span><span class="ellipsis">{{user.snapDrink}}</span></div>
                        <div class="daily-life flex"><span>生活作息</span><span class="ellipsis">{{user.snapDailylife}}</span></div>
                    </div>
                </div>
                <div class="self-education">
                    <div class="title-box flex">
                        <span class="iconfont icon-xueweilimao"></span>
                        <span class="title">教育及工作</span>
                        <span class="edit" @click="toPage('mineDataEdit',{type:'selfEducation'})">+编辑</span>
                    </div>
                    <div class="content-box">
                        <div class="school flex"><span>毕业院校</span><span class="ellipsis">{{user.snapUniversity}}</span></div>
                        <div class="major flex"><span>所学专业</span><span class="ellipsis">{{user.snapMajor}}</span></div>
                        <div class="job flex"><span>职业职务</span><span class="ellipsis">{{user.snapDuties}}</span></div>
                        <div class="company flex"><span>公司性质</span><span class="ellipsis">{{user.snapCompanyNature}}</span></div>
                        <div class="industry flex"><span>公司行业</span><span class="ellipsis">{{user.snapCompanyIndustry}}</span></div>
                        <div class="work-condition flex"><span>工作状态</span><span class="ellipsis">{{user.snapWorkingCondition}}</span></div>
                        <div class="language flex"><span>掌握语言</span><span class="ellipsis" v-html="user.snapMasterLanguage.split(',').join('<br/>')"></span></div>
                    </div>
                </div>
                <div class="self-family">
                    <div class="title-box flex">
                        <span class="iconfont icon-jia"></span>
                        <span class="title">家庭状况</span>
                        <span class="edit" @click="toPage('mineDataEdit',{type:'selfFamily'})">+编辑</span>
                    </div>
                    <div class="content-box">
                        <div class="rank flex"><span>家中排行</span><span class="ellipsis">{{user.snapFamilyRanking}}</span></div>
                        <div class="parent flex"><span>父母情况</span><span class="ellipsis">{{user.snapParentSituation}}</span></div>
                        <div class="father-work flex"><span>父亲工作</span><span class="ellipsis">{{user.snapFatherWork}}</span></div>
                        <div class="mother-work flex"><span>母亲工作</span><span class="ellipsis">{{user.snapMotherWork}}</span></div>
                        <div class="parent-income flex"><span>父母经济</span><span class="ellipsis">{{user.snapParentEconomy}}</span></div>
                        <div class="parent-medical-insurance flex"><span>父母医保</span><span class="ellipsis">{{user.snapParentalInsurance}}</span></div>
                    </div>
                </div>
                <div class="love-plan">
                    <div class="title-box flex">
                        <span class="iconfont icon-aiqingyulangman-"></span>
                        <span class="title">爱情规划</span>
                        <span class="edit" @click="toPage('mineDataEdit',{type:'lovePlan'})">+编辑</span>
                    </div>
                    <div class="content-box">
                        <div class="marry-time flex"><span>想何时结婚</span><span class="ellipsis">{{user.snapMarriageTime}}</span></div>
                        <div class="date-type flex"><span>偏爱约会方式</span><span class="ellipsis">{{user.snapDatingStyle}}</span></div>
                        <div class="value-character flex"><span>希望对方看重</span><span class="ellipsis">{{user.snapOtherSideValues}}</span></div>
                        <div class="wedding flex"><span>期待婚礼形式</span><span class="ellipsis">{{user.snapWeddingForm}}</span></div>
                        <div class="live-with-parent flex"><span>愿与对方父母住否</span><span class="ellipsis">{{user.snapLivingWithParents}}</span></div>
                        <div class="children flex"><span>是否想要孩子</span><span class="ellipsis">{{user.snapWantChildren}}</span></div>
                        <div class="cooking flex"><span>厨艺状况</span><span class="ellipsis">{{user.snapCookingCondition}}</span></div>
                        <div class="housework flex"><span>家务分工</span><span class="ellipsis">{{user.snapDivisionOfLabour}}</span></div>
                    </div>
                </div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import HeadImg from "@/components/HeadImg.vue";
    import RoundProgressBar from "@/components/RoundProgressBar.vue";
    import {updateUser} from "@/store/dispatches";
    import CommonUnit from "@/unit/CommonUnit";
    import DialogConfig from "@/constant/DialogConfig";

    @Component({
        components: {
            HeadImg,
            RoundProgressBar
        }
    })
    export default class MineData extends Scene {
        @State("UserStore")
        public user!: InterfaceUser;
        private pullDownY: number = 0;
        private self: any = {iLikeWho: {}};//个人信息
        private get hobbyItems(): Array<any> {
            const hobbyItems = this.user.snapHobby.split(",");
            return hobbyItems;
        }

        private get screenWidth(): number {
            const screenWidth = window.screen.width;
            return screenWidth;
        }

        private get headAlpha(): number {
            const pullDownY: number = (this.pullDownY >= 0 ? 0 : this.pullDownY);
            const alpha = Math.abs(pullDownY) / 200;
            return (alpha > 1 ? 1 : alpha);
        }



        private activated(){
            (<any> this).$refs.scroll.scrollTo(0, 0, 0);
            this.pullDownY = 0;
        }

        private back(): void {
            this.navigateBack();
        }

        private editIntroduce(): void {
            let toast = (<any> this).$createToast({
                txt: "请稍候",
                time: 0,
                mask: true,
            }).show();
            Http.get(this.api.getSurplusTime, {}, {token: this.user.token}).then((res) => {
                if (res.code === 1) {
                    this.authentication();
                    if (res.data.surplus_time > 0) {
                        toast = (<any> this).$createToast({
                            txt: "自我介绍24小时只能修改一次哦！",
                            time: 2500,
                            mask: true,
                            type: "warn"
                        }).show();
                    } else {
                        this.navigateTo({
                            name: "mineIntroduce"
                        });
                        toast.hide();
                    }
                } else {
                    toast.hide();
                    this.globalSingleResultToast(res);
                }
            });
            //
        }

        private toPage(name: string, query: any = {}): any {
            this.navigateTo({
                name: name,
                query: query
            });
        }

        private toAlbum(): void {
            this.navigateTo({name: "mineAlbum"});
        }

        private scrollHandler(pos: any): void {//scroll滚动事件
            this.pullDownY = pos.y;
        }

        private afterLeave(): void {
            console.log("2");
            this.$root.$emit("triggerScroll");
        }

        private mounted(): void {
            this.self = {
                sex: this.user.gender,//1:男，2:女
                headImg: this.user.avatarId > 0 ? this.user.avatar.filePath : "",
                status: this.user.avatar?this.user.avatar.fileStatus.status:0
            };
        }

    }
</script>

<style scoped lang="stylus">
    .view
        width 100vw;
        height 100vh;
        background $theme-page-common-background-color;
        overflow hidden

        .nav-back
            width 100vw;
            position fixed;
            left 0;
            z-index: 100;
            color #fff;
            padding 15px 10px;
            padding-top calc(15px + var(--safe-area-inset-top));
            background rgba(255, 255, 255, 0);

            .icon-share
                font-size 22px;

            .nickname
                font-size 16px;
                color $theme-common-color;

        .scroll
            position relative;
            height 100vh;

        .nav-box
            position relative;
            width 100vw;
            height 200px;
            background linear-gradient(to right, rgba(254, 124, 79, .6), rgba(255, 89, 163, .6));

            svg
                position absolute;
                bottom 0px;
                left 0px;

            .arc-box
                position absolute;
                left 0px;
                width 100vw;
                z-index 50;

                .head-img-box
                    position absolute;
                    bottom 40px;
                    left calc(50vw - 11vw);
                    border-radius 50%;
                    overflow hidden;
                    text-align center;

                    .state-tip
                        width 100%;
                        height 20px;
                        line-height 20px;
                        color #fff;
                        font-size 10px;
                        background-color rgba(0, 0, 0, .5);
                        position absolute;
                        bottom 0;
                        left 0;

                .who-like-me
                    position absolute;
                    right 10px;
                    flex-wrap wrap;
                    align-content center;
                    justify-content center;
                    text-align center;

                    .tip
                        width 100%;
                        color $theme-common-color;
                        padding-top 10px;

                    .icon-box
                        padding 8px;
                        background-color #fff;
                        border 1px solid $theme-common-color;
                        border-radius 50%;

                        span
                            color $theme-common-color;
                            font-size 20px;

                .data-complete
                    position absolute;
                    left 10px;
                    flex-wrap wrap;
                    align-content center;
                    justify-content center;
                    text-align center;

                    .out-round
                        width 11vw;
                        height 11vw;
                        padding-top 0.5vw;
                        padding-left 0.5vw;
                        border-radius 50%;
                        background-color #fff;
                        box-shadow 0px 1px 1px #ccc;

                    .tip
                        width 100%;
                        color $theme-common-color;
                        padding-top 10px;

        .base-data
            background-color #fff;
            text-align center;

            .nickname
                font-size 16px;
                font-weight 600;
                padding-bottom 12px;

        .other-data
            background-color #fff;
            padding-bottom var(--safe-area-inset-bottom)

            > div
                .title-box
                    height 50px;
                    padding 0px 10px;
                    justify-content: space-between;
                    align-items center;

                    .iconfont
                        display inline-block;
                        width 40px;

                    .icon-touxiang
                        font-size 20px;

                    .icon-xinshuai
                        font-size 24px;

                    .icon-xiangji
                        font-size 24px;

                    .icon-zheyeditu_A
                        font-size 20px;

                    .icon-xueweilimao
                        font-size 22px;

                    .icon-jia
                        font-size 24px;

                    .icon-aiqingyulangman-
                        font-size 22px;

                    .title
                        display inline-block;
                        text-align left;
                        width calc(100vw - 20px - 40px - 80px);
                        font-size 16px;

                    .edit
                        box-sizing border-box;
                        display inline-block;
                        height 25px;
                        width 80px;
                        line-height 25px;
                        text-align center;
                        color $theme-common-color;
                        border 1px solid $theme-common-color;
                        border-radius 5px;

                .content-box
                    margin 0px 19px;
                    padding 15px 0px 15px 15px;
                    border-left 1px solid $theme-line-color;
                    line-height 1.3em;

                    .has-content
                        > span
                            display inline-block;
                            border 1px solid $theme-line-color;
                            border-radius 30px;
                            padding 2px 10px;
                            margin 5px;

            div.spouse-factor, .self-base-data, .self-archives, .self-education, .self-family, .love-plan
                .content-box
                    padding-top 2px;
                    padding-bottom 2px;

                    > div
                        padding 8px 0px;

                        > span
                            display inline-block;
                            width 50vw;


</style>
